<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow v-if="pieData.length > 0">
          <chart-pie ref='todayRequestNumber' style="height: 300px;" :value="pieData" text="今日访问量"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow v-if="barData">
          <chart-bar style="height: 300px;" :value="barData" text="前七天用户活跃度"/>
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow v-if="increaseListData.length > 0">
        <example :lists="increaseListData" style="height: 310px;"/>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { homeAnalyze } from '@/graphql/query/analyze'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      inforCardData: [],
      pieData: [],
      barData: null,
      increaseListData: []
    }
  },
  mounted () {
    homeAnalyze().then((res) => {
      // 今日数据
      const { today_analyze, seven_member_active_analyze, member_increase_analyze } = res.data
      const inforCardDataConfigs = this.inforCardDataConfig
      const inforCardData = []
      for (const key in inforCardDataConfigs) {
        if (inforCardDataConfigs.hasOwnProperty(key)) {
          const element = inforCardDataConfigs[key]
          element.count = today_analyze[key]
          inforCardData.push(element)
        }
      }
      this.inforCardData = inforCardData
      // 今日访问量
      const pieDataConfig = this.pieDataConfig
      const pieData = []
      for (const key in pieDataConfig) {
        if (pieDataConfig.hasOwnProperty(key)) {
          const element = pieDataConfig[key]
          element.value = today_analyze[key]
          pieData.push(element)
        }
      }
      this.$nextTick(() => {
        this.pieData = pieData
        this.barData = seven_member_active_analyze
        this.increaseListData = member_increase_analyze.data
      })
    })
  },
  computed: {
    pieDataConfig () {
      return {
        today_principal_request_number: { value: 0, name: '校长' },
        today_manager_request_number: { value: 0, name: '管理员' },
        today_teacher_request_number: { value: 0, name: '老师' },
        today_parent_request_number: { value: 0, name: '家长' }
      }
    },
    inforCardDataConfig () {
      return {
        wait_check_school_number: {
          title: '待审核',
          icon: 'md-clock',
          count: 0,
          color: '#2d8cf0'
        },
        total_school_number: {
          title: '机构总数',
          icon: 'md-school',
          count: 0,
          color: '#9A66E4'
        },
        increase_member_number: {
          title: '新增用户',
          icon: 'md-contact',
          count: 0,
          color: '#19be6b'
        },
        today_member_pv: {
          title: '今日用户PV',
          icon: 'md-trending-up',
          count: 0,
          color: '#ff9900'
        },
        today_member_uv: {
          title: '今日用户UV',
          icon: 'ios-trending-up',
          count: 4,
          color: '#ed3f14'
        },
        total_member_number: {
          title: '用户总数',
          icon: 'md-contacts',
          count: 0,
          color: '#E46CBB'
        }
      }
    }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 26px;
}
</style>
